<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/plugin/jqPaginator.min.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<div class="am-cf shop-main" style="padding-top:0px;">
  <!-- sidebar start -->
  <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only shop-menu" data-am-offcanvas="{target: '#shop-offcanvas'}"></a>
  <div class="sidebar shop-sidebar am-offcanvas" id="shop-offcanvas"></div>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
        <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
          <li><span class="am-icon-shopping-bag am-icon-fw"> </span>交易信息</li>
          <li>我的订单</li>
          <li class="am-active">订单详情</li>
          <li><span id="navOrderNo">-</span></li>
        </ol>
        <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
          <div class="am-panel-hd">
            <span class="am-text-success">订单状态 [订单编号：<strong id="lblOrderNo"></strong>]</span>
          </div>
          <div class="am-panel-bd">
            <strong class="am-text-danger" id="lblStatus">-</strong>
            &emsp;
            <button id="btnPay" style="display: none;" type="button" class="am-badge am-badge-secondary">立即支付</button>
          </div>
        </div>
        <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
          <div class="am-panel-hd">
            收货信息
          </div>
          <div class="am-panel-bd am-g am-padding-horizontal-0">
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">收货人</div>
            <div class="am-u-sm-8 am-u-md-2"><span id="lblShipName">-</span></div>
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">收货地址</div>
            <div class="am-u-sm-8 am-u-md-6"><span id="lblShipAddress">-</span></div>
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">电话</div>
            <div class="am-u-sm-8 am-u-md-2"><span id="lblShipPhone">-</span></div>
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">邮编</div>
            <div class="am-u-sm-8 am-u-md-6"><span id="lblShipZipCode">-</span></div>
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">附言</div>
            <div class="am-u-sm-8 am-u-md-10"><span id="lblRemark">-</span></div>
          </div>
        </div>
        <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
          <div class="am-panel-hd">
            支付信息
          </div>
          <div class="am-panel-bd am-g am-padding-horizontal-0">
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">配送方式</div>
            <div class="am-u-sm-8 am-u-md-2">科泰宠物托运中心</div>
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">支付方式</div>
            <div class="am-u-sm-8 am-u-md-6">支付宝</div>
            <div class="am-u-sm-4 am-u-md-2 am-text-right am-kai am-padding-horizontal-0">配送费用</div>
            <div class="am-u-sm-8 am-u-md-10 am-text-danger">￥12</div>
          </div>
        </div>
        <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
          <div class="am-panel-hd">
            商品信息
          </div>
          <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
            <table id="tblOrderDetailList" class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
            <thead>
              <tr>
                <th>商品名称</th>
                <th>商品分类</th>
                <th>卖家</th>
				<th>购买价格</th>
				<th>购买数量</th>
                <th>小计</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
          </div>
        </div>
        <button type="button" class="am-btn am-btn-default am-btn-xs am-fr am-margin-sm" onclick="window.history.back(); return false;"><span class="am-icon-undo">  返  回</span></button>
      </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>

<script type="text/javascript">

    // '订单明细'列表
    let orderDetailList = new Array();

    // 商品分类列表
    let categoryList = new Array();

    let jsonUser;
    let token;

    // 订单id
    let orderId = GetQueryString('id');

    $(function(){

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'login.html';
            return;
        }

        // 加载公共侧边栏模板
        $('.sidebar').load('sidebar.html');


        // '立即支付'按钮事件
        $('#btnPay').click(function () {

            // 跳转到支付确认界面
            top.location.href = 'payment_confirm.html?id=' + orderId;

        });// $('#btnPay').click();

        // 查看是否存在订单id
        if( orderId ) {
            // 加载'商品分类'列表
            loadCategoryList();

            // 如果存在订单id，就加载订单信息
            loadOrderInfo();

            // 加载'订单明细'列表数据
            loadOrderDetailList();
        }

    });// $(function());

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

        }// success();

    });// $.post();

}// loadCategoryList();

/**	加载'订单明细'列表数据 **/
function loadOrderDetailList() {

    // 加载'商品列表'数据
    $.post('http://localhost:8080/order/detail/list',
        {
            token: token,
            orderId: orderId

        }, function (result) {

            // 如果返回的是token失效，就重新登录
            if(result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'login.html';
                    }
                });// Modal.confirm();

                return;
            }// if(result.code == 419);

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            orderDetailList = result.data;

            // 填充表格数据
            fillOrderDetailList();

    });// $.post();

}// loadOrderDetailList();

/** 填充表格数据 **/
function fillOrderDetailList( ) {

    // 清空表格数据
    $('#tblOrderDetailList tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !orderDetailList || orderDetailList.length == 0 ){
        return;
    }// if();

    // 商品总数量
    let quantityAmount = 0;
    // 商品总金额
    let priceAmount = 0;

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < orderDetailList.length; i++ ) {

        let orderDetail = orderDetailList[i];

        // 商品名称
        let tdName = '<td class="productName"><a href="product_content.html?id='
                      + orderDetail.productId + '&cid=' + orderDetail.categoryId + '">'
                      + orderDetail.productName + '</a></td>';

        // 商品分类
        let tdCategory = '<td>' + getCategoryPath(orderDetail.categoryId) + '</td>';

        // 卖家
        let tdSellerName = '<td><strong class="am-text-truncate">'
            + '<a target="_blank" href="seller_item_list.html?id=' + orderDetail.sellerId
            + '">' + orderDetail.sellerUsername + '</a></strong></td>';

        // 购买价格
        let tdPrice = '<td>' + priceCurrencyFormat(orderDetail.unitPrice) + '</td>';

        // 购买数量
        let tdQuantity = '<td><span class="storeInfo">' + orderDetail.quantity + '</span></td>';

        // 小计
        let tdSubTotal = '<td class="am-text-middle"><strong class="subtotalPrice am-text-danger">' + priceCurrencyFormat(orderDetail.totalPrice)  + '</strong></td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblOrderDetailList tbody').append('<tr>' + tdName + tdCategory + tdSellerName + tdPrice + tdQuantity + tdSubTotal + '</tr>');

        // 统计商品总件数
        quantityAmount += orderDetail.quantity;
        // 统计商品总金额
        priceAmount += orderDetail.totalPrice;

    }// for();

    // 总计单元格
    let trTotalAmount = '<tr><td colspan="5">商品共计&nbsp;<strong class="am-text-danger">'
        + quantityAmount + '</strong>&nbsp;件&nbsp;&nbsp;&nbsp;&nbsp;'
        + '商品总金额：<strong class="am-text-danger">'
        + priceCurrencyFormat(priceAmount) + '</strong>&nbsp;&nbsp;&nbsp;&nbsp;<br class="am-show-sm-only">'
        + '配送费用：<strong class="am-text-danger">￥12</strong>&nbsp;&nbsp;&nbsp;&nbsp;'
        + '订单总金额：<strong id="orderAmount" class="am-text-danger">'
        + priceCurrencyFormat(priceAmount + 12) + '</strong></td></tr>';

    $('#tblOrderDetailList tbody').append(trTotalAmount);

}// fillOrderDetailList();

/** 根据订单id，查找订单信息 **/
function loadOrderInfo(){

    // 加载'商品信息'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/order/get',
        async: false,
        data: {
            token: token,
            id:orderId
        },
        success: function (result) {

            // 如果返回的是token失效，就重新登录
            if (result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'login.html';
                    }
                });// Modal.confirm();

                return;
            }

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 填充订单信息数据
            fillOrderInfo(result.data);
        }

    });// $.ajax();

}// loadOrderInfo();

/** 填充订单信息 **/
function fillOrderInfo( order ) {

    // 导航栏-订单编号
    $('#navOrderNo').html(order.orderNo);
    // 标题栏-订单编号
    $('#lblOrderNo').html(order.orderNo);

    // 订单状态
    $('#lblStatus').html('您的订单' + ORDER_STATUS[order.status]);
    // 如果订单状态为'未支付'
    if( order.status == ORDER_STATUS_CONST.UN_PAY ) {
        // 显示'支付'按钮
        $('#btnPay').show();
    }

    // 收货人姓名
    $('#lblShipName').html(order.shippingName);
    // 收货地址
    $('#lblShipAddress').html(order.shippingAddress);
    // 收货人手机号码
    $('#lblShipPhone').html(order.shippingPhone);
    // 收货人邮编
    $('#lblShipZipCode').html(order.shippingZipCode);
    // 附言
    $('#lblRemark').html(order.remark);

}// fillOrderInfo( order );

/** 根据商品分类id，获取商品分类路径信息 **/
function getCategoryPath( categoryId ) {

    // 分类路径
    let categoryPath = "";

    // 父分类id
    let parentCategoryId;

    // 子分类名称
    let childCategoryName;

    // 循环查找父分类id
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的id，等于传入的分类id
        if( category.id == categoryId ){
            // 设置父分类id
            parentCategoryId = category.parentId;
            // 设置子分类名称
            childCategoryName = category.name;
            break;
        }

    }// for();

    // 循环查找父分类名称
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，等于找到的父分类id
        if( category.id == parentCategoryId ){
            // 设置当前父分类名称路径
            categoryPath = category.name + '&nbsp;->&nbsp;' + childCategoryName;
            break;
        }

    }// for();

    return categoryPath;


}// getCategoryPath( categoryId );
</script>
</html>
